<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //如果要操作当前页面的元素，一定要写在window.onload当中
        window.onload = function () {
            var divElement = document.getElementById('div1');
            //获取当前元素的对应属性
            var classText = divElement.getAttribute('class');
            //获取当前元素的class属性值
            console.log(classText);
            console.log(divElement.className);
            //获取当前元素的id值
            console.log(divElement.getAttribute('id'));
            console.log(divElement.id);
            //获取当前元素的name值
            console.log(divElement.getAttribute('name'));
            //设置当前元素的属性
            divElement.setAttribute('class', 'div2Class');

            //操作input输入框相关属性
            var usernameElement = document.getElementById('username');
            //设置当前文本框可读
            usernameElement.setAttribute("readonly", true);
            // usernameElement.readonly = true;
            //设置当前文本框禁用
            // usernameElement.setAttribute("disabled", true);
            //设置当前文本框隐藏
            // usernameElement.setAttribute("hidden", true);
            //设置当前文本框的value
            usernameElement.setAttribute("value", '123456');
            // usernameElement.value = '12345678';

            //innerHTML和innerText的区别
            //div1<input type="text" id="username" name="username" readonly="true" value="123456">
            console.log(divElement.innerHTML);
            //div1
            console.log(divElement.innerText);
        }
    </script>
</head>
<body>
<div id="div1" name="div1Name" class="div1Class">div1<input type="text" id="username" name="username"/></div>

<!--<input type="text" id="username" name="username" disabled="disabled" hidden="hidden" readonly="readonly"/>-->
</body>
</html>